<template>
	<!-- 组件标签 -->
	<div id="app">
		<div style="height: 60px;">
			<h2 align="center">学生成绩管理 Vue3</h2>

		</div>
		<div style="width: 100%;display: flex;">
			<div style="width: 50%;"></div>
			<div style="display: flex;justify-content: space-between;width: 50%;">
				<p>姓名: {{$store.state.user.name}}</p>
				<p>用户角色: {{$store.state.user.roleName}}</p>
				<p>
					<img style="width: 3vw;height: 3vw;" src="./assets/logo.png" alt="" v-show="this.$store.state.user.pic == ''"/>
					<img style="width: 3vw;height: 3vw;"
						v-bind:src="this.$ip +'/api/public/showimg/'+ this.$store.state.user.pic" v-show="this.$store.state.user.pic != ''"></p>
				<p><a @click="logout()">退出</a></p>

			</div>
		</div>

		<div style="display: flex; justify-content: space-between;">
			<div style="width: 100%; border: 2px solid darkcyan;">
				<router-view></router-view>
			</div>
		</div>
		<!-- 公用 DIV 区域， 显示路由组件 -->
	</div>
</template>

<script>
	export default {
		el:"#app",
		data() {

		},
		mounted() {
			/*
			除了使用<router-link>进行声明式导航外，Vue路由还允许你使用编程式导航。
			这可以通过【router.push】、router.replace或router.go方法来实现。
			*/
			this.$router.push('/login');

			/*
		   // vm.prototype.$router = router
		   vm.use(router)
		   */
		},
		methods: {
			logout() {
				window.localStorage.setItem("token", "");
				this.$router.push("/login");
			}
		},
		
	};
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 0px;
	}
</style>